<template>
	<view>
		<view>
			<view class="swiper">
				<u-swiper :list="info.mediaListUrls" :indicator="true" height="200"
					:indicatorStyle="{bottom:'10px'}"></u-swiper>
			</view>
			<view class="info">
				<view class="title">{{info.name}}</view>
				<view class="desc mt-20">{{info.description}}</view>
				<view class="tags mt-20">
					<text v-for="item in info.tags">{{item}}</text>
				</view>
				<view class="map mt-30">
					<map style="width: 100%; height: 150px;border-radius:10px;overflow: hidden;"
						:latitude="info.latitude" :longitude="info.longitude"></map>
				</view>
				<view class="address py-20">
					<view class="label">
						<u-icon name="map" color="#999999"></u-icon>{{info.address}}
					</view>
					<view class="action">
						<view class="action-item" @click="openLocation">
							<view class="icon"><u-icon name="map" size="20"></u-icon></view>
							<view class="text">导航</view>
						</view>
					</view>
				</view>
			</view>
			<view class="section mt-20">
				<!-- <view class="section-title">经营信息</view> -->
				<u-cell-group :customStyle="{fontSize:'12px'}">
					<u-cell icon="clock" title="营业时间" value="09:00~20:00"></u-cell>
					<u-cell icon="phone" isLink title="联系电话" :value="info.contactInfo"
						@click="makePhoneCall(info.contactInfo)"></u-cell>
				</u-cell-group>
			</view>
			<view class="section mt-20">
				<!-- <view class="section-title">简介</view> -->
				<view class="description  p-30">
					<u-parse :content="info.description"></u-parse>
				</view>
			</view>
			<!-- <view class="section mt-20">
				<view class="section-title">相册</view>
			</view> -->

		</view>
	</view>
</template>

<script>
	import {
		getMerchantsDetail
	} from '@/config/api.js'

	export default {
		data() {
			return {
				options: {},
				info: {},
				// 地图视野包含的经纬度范围
				includePoints: [{
					latitude: 39.90469, // 纬度
					longitude: 116.40717, // 经度
				}, ],
			};
		},
		onLoad(options) {
			this.options = options;
			this.getPageData();
		},
		methods: {
			async getPageData() {
				let res = await getMerchantsDetail(this.options.id);
				this.info = res;
			},
			// 拨打电话
			makePhoneCall(phone) {

				// 调用拨打电话 API
				uni.makePhoneCall({
					phoneNumber: phone,
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.log('拨打电话失败', err);
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none',
						});
					},
				});
			},
			openLocation() {
				const latitude = this.info.latitude;
				const longitude = this.info.longitude;
				const name = this.info.name;

				uni.openLocation({
					latitude, // 纬度
					longitude, // 经度
					name, // 地点名称
					address: this.info.address, // 地址详情
					success: () => {
						console.log('打开地图成功');
					},
					fail: (err) => {
						uni.showToast({
							title: '打开地图失败',
							icon: 'none',
						});
					},
				});
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.info {
		padding: 30rpx 30rpx 0;
		background-color: white;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;

		.name {
			font-size: 17px;
			font-weight: bold;
		}
		.desc{
			font-size: 14px;
			color: #999999;
		}
		.tags {
			margin-left: -10rpx;
			margin-right: -10rpx;

			text {
				display: inline-block;
				padding: 2px 8px;
				border-radius: 5px;
				background-color: #f7f7f7;
				font-size: 12px;
				margin: 10rpx;
			}
		}

		.address {
			display: flex;
			align-items: center;

			.label {
				display: flex;
				align-items: center;
				flex-grow: 1;
				font-size: 14px;
				color: #999999;
			}

			.action {
				flex-shrink: 0;
				display: flex;

				.action-item {
					width: 40px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.text {
						color: #999999;
						font-size: 12px;
						margin-top: 10rpx;
					}
				}
			}
		}
	}

	.description {
		font-size: 14px;
		color: #888;
	}

	.section {
		background-color: white;

		.section-title {
			font-size: 17px;
			padding: 20rpx 30rpx;
		}
	}
</style>